<template>
  <el-form :inline="true" :model="formSearchData" size="small">
    <template v-for="(item,field) in dataSearch">
      <el-form-item :label="item.label||''" >
        <template v-if="'select'==item.type">
          <el-select v-model="formSearchData[field]" :placeholder="item.label||''">
            <el-option
                v-for="(o,index) in (item.options || [])"
                :key="index"
                :label="o.label"
                :value="o.value">
            </el-option>
          </el-select>
        </template>

        <template v-else-if="'selectGroup'==item.type">
          <el-select v-model="formSearchData[field]" :placeholder="item.label||''" :clearable="item.clearable">
            <el-option-group
                v-for="group in (item.options || [])"
                :key="group.label"
                :label="group.label">
              <el-option
                  v-for="(o,index) in (group.options || [])"
                  :key="index"
                  :label="o.label"
                  :value="o.value">
              </el-option>
            </el-option-group>
          </el-select>
        </template>

        <template v-else-if="'date'==item.type">
          <el-date-picker
              v-model="formSearchData[field]"
              type="date"
              :placeholder="item.label||''"
              align="right"
              size="small"
              :value-format="item.format || 'yyyy-MM-dd'"
          >
          </el-date-picker>
        </template>

        <template v-else-if="'dateTime'==item.type">
          <el-date-picker
              v-model="formSearchData[field]"
              type="datetime"
              :placeholder="item.label||''"
              align="right"
              size="small"
              :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          >
          </el-date-picker>
        </template>

        <template  v-else-if="'dateTimeRange'==item.type">
          <el-date-picker
              v-model="formSearchData[field]"
              type="datetimerange"
              :placeholder="item.label||''"
              align="right"
              size="small"
              :range-separator="item.rangeSeparator || '至'"
              :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
          >
          </el-date-picker>
        </template>

        <template v-else>
          <el-input v-model="formSearchData[field]" :placeholder="item.label||''"></el-input>
        </template>

      </el-form-item>
    </template>


    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form-item>

    <div class="float-right float-end form-search-append">
      <slot name="append"></slot>
    </div>
  </el-form>
</template>

<script>
export default {
  components: {},
  props: {
    dataSearch: {
      type: Object,Array,
      default: function (){
        return {};
      }
    },
    submitCallback:{
      type: Function,
      default: null
    },
    alertSearchData:{
      type: Function,
      default: null
    }
  },
  data() {
    return {
      formLabelWidth: window.formLabelWidth,
      formSearchData: {},
    }
  },
  created() {
    let seachValues = {};
    for (let field in this.dataSearch) {
      let field_value = LeUtils.valueGet(this.dataSearch, field + '.value', '');
      if(parseInt(field_value)==field_value){
          field_value = parseInt(field_value);
      }
      seachValues[field] = field_value;
    }
    this.formSearchData = seachValues;
    this.getSearchData()
    //console.log(this);
  },
  mounted() {
    let _this = this;
  },
  methods: {
    getSearchData:function (page){
      page = page || '';
      let searchData = this.formSearchData;
      searchData.pager_page = page;
        if (this.alertSearchData && LeUtils.typeIs('function',this.alertSearchData)){
            searchData =  this.alertSearchData(searchData)
        }
      this.formSearchData = searchData
      return searchData;
    },
    search: function (page) {
      let searchData = this.getSearchData(page);
      if (this.submitCallback && LeUtils.typeIs('function',this.submitCallback)){
        return this.submitCallback(searchData)
      }
      window.location.href = LeUtils.buildUrl(window.location.href, searchData);
    },
  }
}
</script>
